import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

// 封装一个通用的函数，实现数据懒加载
// 入参： fn。目标从不可见 --> 可见  要执行的代码
// 返回值：target，要监听的目标
const useLazyData = fn => {
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    console.log(isIntersecting, stop)
    if (isIntersecting) {
      // 1. 停止观察
      stop()
      // 2. 执行回调
      fn()
    }
  }, { threshold: 0 })

  // 要观察的目标
  return target
}

export {
  useLazyData
}
